<template>
    <div class="study_title">
        <div class="title_name">
            <h3>{{name}}</h3>
        </div>
        <ul class="collection" v-if="isCollection">
            <li :class="isActive == item.id?'active':''" v-for="item in Start" :key="item.id" @click="handleActive(item.id)">{{item.name}}</li>
        </ul>
        <div class="more">
            <span>更多 > </span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            name:String,
            isCollection:Boolean
        },
        data(){
            return{
                Start:[{
                    id:1,
                    name:"视频"
                },{
                    id:2,
                    name:"试卷"
                },{
                    id:3,
                    name:"试题"
                },{
                    id:4,
                    name:"文章"
                }],
                isActive:1
            }
        },
        methods:{
            handleActive(id){
                this.isActive = id
            }
        }
    }
</script>

<style lang="scss" scoped>

    .study_title::after,
    .collection::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>